<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>缤格</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../script/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/binge.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/layui/layui.all.js"></script>
    <script type="text/javascript" src="../../script/swiper.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>

    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>


<div class="circle-head bg-cover" id="circleBg" style="background: url(); height: 2.9rem;">
    <div id="header">
        <!-- header -->
        <div class="header" style="margin-bottom: 0;">
            <div class="head-back">
                <a href="javascript:void(0);" tapmode onclick="comeBack()" class="back-btn-white"></a>
            </div>
            <div class="head-title">
                <h6 style="color: transparent" class="circleName"></h6>
            </div>
            <div class="head-action">
                <a href="javascript:void(0);" tapmode class="action-btn-white"></a>
            </div>
        </div>

        <!-- header end -->
    </div>

    <div class="department-rank">

        <div class="rank-info">
            <div class="rank-num" id="ranking">NO.1</div>
            <div class="info">
                <h6 id="infoName">体育部</h6>
                <div class="pf">
                    <div class="star" id="star"></div>
                    <div class="mark" id='mark'>4.0分</div>
                </div>
            </div>
        </div>

        <div class="toEvaluate" tapmode onclick="toEvaluate('../circle/department_evaluate')">去评星</div>
    </div>

</div>
<div class="circle-list-section" style="border-top:none;">
    <div class="comment-kinds" style="height: 1rem;">
        <h6 style="font-size: 0.3rem;color: #ff7777;"><b>全部评价</b><span id="num">(0)</span></h6>
        <div class="screen-btn" tapmode onclick="screen(this)">按热度</div>
    </div>
    <div class="comment-area">
        <div class="comment-list area">
            <ul id="commentHtml">

            </ul>
            <div class="comment-input" style="display: none;">
                <div class="input-box">
                    <input type="text" id="inputContent" readonly data-pid="" placeholder="写评论...">
                    <!--<button class="send-btn" tapmode onclick="comment_add()">确定</button>-->
                </div>
                <div class="comment-count">
                    <div class="count-li collect" id="collect" tapmode onclick="collect(this)">0</div>
                    <div class="count-li love" id="love" tapmode onclick="clickFabulous('',7,'',event)">0</div>
                    <div class="count-li msg" id="msg" tapmode onclick="toAllList()">0</div>
                </div>
            </div>

        </div>
    </div>

</div>

<div class="edit-model" style="display: none;">
    <div class="edit-input">
        <div class="message-flex">
            <div class="message-box" id="message">
                <div class="message" id="article" contenteditable="true"></div>
            </div>
            <div class="message-img" style="display: none;" id="msgImg">
                <img src="" alt="">
                <span class="delete dn" tapmode onclick="removePic(this,event)"></span>
            </div>
        </div>

        <div class="But">
            <div class="but-list">
                <a href="javascript:void(0);" tapmode onclick="upload()" class="imgBut"></a>
                <a href="javascript:void(0);" tapmode onclick="showVideo()" class="videoBut"></a>
                <a href="javascript:void(0);" tapmode onclick="toAiteList()" class="aiTeBut"></a>
            </div>
            <span class="submit" tapmode onclick="comment_add()">确定</span>
        </div>
    </div>
</div>

<!--评论通用-->
<div class="photoViewerCommon">
    <div class="swiper-container photoViewer-common">
        <ul class="swiper-wrapper">
            <!--<li class="swiper-slide"><img src="../../image/banner01.png" alt=""></li>-->
            <li class="swiper-slide" onclick="closeViewCommon()"><img onclick="showViewCommon(event)" id="currentPic" class="swiper-lazy" src="" alt=""><div class="swiper-lazy-preloader"></div></li>
        </ul>
        <div class="photoViewer-bottom">
            <div onclick="closeViewCommon()" class="closeViewer"></div>
            <div class="swiper-pagination"></div>
            <div onclick="downloadPicCommon(event)" class="download"></div>
        </div>
    </div>
</div>

</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/detailSwiper.js"></script>
<script type="text/javascript" src="../../script/comment.js"></script>
<script type="text/javascript">
    var circle_id = '';//圈子id
    var ranking = '';//当前排名
    var department_id = '';//社团id
    var type = 1;//类型：1时间排序 2热度排序
    var page = 1;
    var pullUp = false;
    var video_id = 0;
    var msgImg_id = 0;
    apiready = function () {
        $api.fixStatusBar($api.dom('#header'));
        api.setStatusBarStyle({
            style: 'light', //设置APP状态栏字体色
            color: 'rgba(255,255,255,0)', //设置APP状态栏背景色
        });
        //setFixStatusBar(); //设置状态栏
        keybackListener()
        department_id = api.pageParam.id;
        ranking = api.pageParam.ranking;
        // department_id = 15;
        // ranking = 1;

        $("#ranking").html('NO.'+ranking);

        getDetail()

        //发布活动返回监听刷新
        api.addEventListener({
            name: 'star'
        }, function (ret, err) {
            getDetail()
        });

        //上拉加载
        pullUpLoading(function () {
            if (pullUp == true) {
                getEvaluateDetail()
            }
        });

        SystemCheckVersion()

        api.addEventListener({
            name: 'aite'
        }, function(ret, err) {
            console.log(JSON.stringify(ret.value));
            var mid = ret.value.id;
            var mname = ret.value.name;
            var mUrl = '../activity/person_index';
            var m_id = {member_id: mid}
            var word = '<span style="display: inline; color: #ff7777;" class="aite" data-id="'+mid+'" onclick=\'commonUrl("'+mUrl+'",'+jsonChange(m_id)+')\'>@'+mname+'</span>　';
            // $("#article").append(word);
            checkSystemType(function () {
                $("#article").append(word);
            },function () {
                _insertimg(word)
            });
        });

    };

    function comeBackBar() {
        api.historyBack({}, function (ret, err) {
            if (!ret.status) {
                api.closeWin();
                setFixStatusBar(); //设置状态栏
            }
        });
    }


    function toAllList() {
        //type: 1新闻，2帖子，3活动贴，4赛事，5战况，6投票，7广场评星
        getAllList(7,department_id)
    }


    //二级评论获取评论目标
    var _input = $("#inputContent");
    var _editModel = $(".edit-model");
    var _article = $("#article");
    _input.click(function () {
        _editModel.show();
        var html = _article.html()
        _article.html('').focus();
    });

    var pid = 0;
    var key_id = '';
    var gc_pid = '';

    function reply(id, name) {
        _editModel.show();
        var html = _article.html()
        _article.html('').focus();
        key_id = id;
        gc_pid = 0;
        _input.attr('placeholder', '回复：' + name);
        _editModel.show();
        _article.focus();
        console.log(pid)
    }
    function replySecond(kid,id, name) {
        _editModel.show();
        var html = _article.html()
        _article.html('').focus();
        gc_pid = id;
        key_id = kid;
        _input.attr('placeholder', '回复：' + name);
        _editModel.show();
        _article.focus();
        console.log(pid)
    }

    /*_article.blur(function () {
        if (_article.html() == '' || msgImg_id != 0) {
            _input.val('');
            _input.attr('placeholder', '写评论...');
            _input.attr('data-pid', '');
        }
    });*/


    //关闭评论框
    _editModel.on('click', function () {
        _input.val('');
        _input.attr('placeholder', '写评论...');
        _input.attr('data-pid', '');
        _editModel.hide()
    });
    //阻止事件冒泡 关闭评论框
    _editModel.on('click', '.edit-input', function (event) {
        event.stopPropagation()
        /*_article.focus();*/
    });

    //评论
    var addStatus = true;
    function comment_add() {
        var type = 7;
        var uidsArr = [];
        $("#article .aite").each(function () {
            var _this = $(this);
            var _thisId = _this.attr('data-id');
            uidsArr.push(_thisId);
        });
        var param = {
            token: $api.getStorage('token'),
            type: type,//类型：1新闻 2帖子 3活动 0回复 4赛事，5战况，6投票，7广场
            key_id: key_id,
            content: _article.html(),
            pid: gc_pid,//当type为0的时候必须传入,二级回复，就是评论的id
            icon: msgImg_id,
            void_id: video_id,
            uids: uidsArr.toString()
        }
        if (!isDefine(param.content)&&!isDefine(param.icon)&&!isDefine(param.void_id)) {
            pop.notice('请发表你的评论内容');
            return false;
        }
        if(addStatus == false){
            return;
        }
        console.log(jsonChange(param));
        // return;
        pop.loading();
        getAjax(Interface.comment_add, param, function (res) {
            addStatus = false;

            _editModel.hide();
            _article.html('');
            _input.attr('placeholder', '写评论...');
            _input.attr('data-pid', '');

            $("#msgImg").siblings('img').attr('src','').removeAttr('data-id');
            $("#msgImg").hide();
            msgImg_id = 0;
            video_id = 0;

            pop.notice(res.msg)
            pop.close();
            setTimeout(function () {
                page = 1;
                getEvaluateDetail()
                addStatus = true;
            }, 1000)
        }, function (error) {
            pop.notice(error.msg)
            pop.close();
        })
        _article.blur();//失去焦点
    }

    //点赞
    function clickFabulous(f_stype, type, pid,event) {
        event.stopPropagation()
        //活动点赞
        if (type == 2) {
            pid = invitation_id;
            if ($('#love').hasClass('on')) {
                f_stype = 2
            } else {
                f_stype = 1
            }
        }

        fabulous(f_stype, type, pid, function (res) {
            if (f_stype == 1) {
                pop.notice('点赞成功')
            } else {
                pop.notice('取消点赞')
            }
            setTimeout(function () {
                page = 1;
                getEvaluateDetail()
            }, 500)
        })
    }



    //去评星
    function toEvaluate(path) {

        var param = {id:department_id}
        commonUrl(path,param)
    }


    //获取圈子详情
    function getDetail() {
        var param = {
            token: $api.getStorage('token'),
            gc_id: department_id,
        }

        pop.loading();
        getAjax(Interface.gc_details_top, param, function (res) {
            console.log(jsonChange(res))
            var data = res.data;//广场详情
            $("#circleBg").css({background: 'url('+ ajaxUrl + data.back_path +')'})
            $("#infoName").html(data.title)
            $("#mark").html(data.aver_socre+'分');

            getEvaluateDetail()

            layui.use(['rate'], function(){
                var rate = layui.rate;
                //只读
                rate.render({
                    elem: $("#star"),
                    value: data.aver_socre,
                    readonly: true,
                    half: true //开启半星
                });

            });


            pullUp = true;
            pop.close();
        }, function (error) {

            pop.notice(error.msg);
            pop.close();

        })
    }

    //获取评论详情
    function getEvaluateDetail() {
        var param = {
            token: $api.getStorage('token'),
            gc_id: department_id,
            type: type,//类型：1时间排序 2热度排序
            page: page,
        }

        pop.loading();
        getAjax(Interface.gc_details_lower, param, function (res) {
            console.log(jsonChange(res))
            var list = res.data.comment;//广场详情
            var count = res.data.comment_count;
            if(isDefine(count)){
                $("#num").html('('+count+')');
            }
            var commentHtml = '';
            if(isDefine(list)){

                commentHtml = getEvaluteList_gc(list,department_id);
                // console.log(commentHtml)

                if (page == 1) {
                    $("#commentHtml").html(commentHtml)
                } else {
                    $("#commentHtml").append(commentHtml)
                }
                layui.use(['rate'], function(){
                    var rate = layui.rate;
                    //只读

                    $(".eStar").each(function () {
                        var _this = $(this);
                        var _num = _this.attr('data-num');
                        rate.render({
                            elem: _this,
                            value: Number(_num),
                            readonly: true,
                            half: true //开启半星
                        });
                    });

                });
                page++;
                pullUp = true;
            } else {
                if (page == 1) {
                    $("#commentHtml").html(noData)
                } else {
                    $("#commentHtml").append('<p class="t-c f24 pt10 pb10" style="color: #ccc;">没有更多了</p>')
                }
                pullUp = false;
            }


            pop.close();
        }, function (error) {

            pop.notice(error.msg);
            pop.close();

        })
    }
    layui.use(['rate'], function(){
        var rate = layui.rate;
        //只读

        $(".eStar").each(function () {
            var _this = $(this);
            var _num = _this.attr('data-num');
            rate.render({
                elem: _this,
                value: _num,
                readonly: true,
                half: true //开启半星
            });
        });

    });

    //排序
    function screen(that) {
        var _this = $(that);
        if (_this.html() == '按热度') {
            $(".screen-btn").html('按时间')
            type = 2;
        } else {
            $(".screen-btn").html('按热度');
            type = 1;
        }
        page = 1;
        getEvaluateDetail();
    }



</script>
